<template>
	<view class="bg">
		<u-calendar v-model="show" mode="range" @change="change"></u-calendar>
		<!-- <u-button @click="show = true">选择</u-button> -->
		<view class="task_one">
			<u-search placeholder="请输入关键词" v-model="keyword" @change='searchList' :show-action='false'></u-search>
		</view>
		<view class="task_one">
			<view class="task_line100">
				<view class="line_left">选择时间：</view>
				<view class="line_right" @click="show = true">{{ time }}</view>
			</view>
		</view>
		<view class="task_bg">
			<view>
				<view class="task_one" v-for="(item, index) in jxkhArr" :key="index">
					<view class="task_line">
						<view class="line_left">用户名称：</view>
						<view class="line_right">{{ item.userName }}</view>
					</view>
					<view class="task_line">
						<view class="line_left">登录次数：</view>
						<view class="line_right">{{ item. count }}</view>
					</view>
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import {
		dltjList,
	} from '@/request/zdxm.js'
	
	export default {
		data() {
			return {
				keyword: '',
				time: '请选择开始时间与结束时间',
				show: false,
				scrollTop: 0,
				role: uni.getStorageSync('role'),
				jxkhArr: [],
				jxkhNowPage: 1,
				jxkhstatus: 'loadmore',
				examUserType: '责任单位',
				typeIndex: 1,
				typeArr: [
					{
						name: "责任单位",
						type: 1
					},
					{
						name: "审批单位",
						type: 2
					},
					{
						name: "督查组",
						type: 3
					},
					{
						name: "县分管领导",
						type: 4
					},
					{
						name: "乡镇",
						type: 5
					},
				],
				list: [{
						name: "待处理",
					},
					{
						name: "已处理",
					},
				],
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				dayStart: '',
				dayEnd: '',
			};
		},
		onLoad() {
			this.dltjList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.jxkhstatus = 'loading';
			this.jxkhNowPage++
			this.dltjList()
		},
		methods: {
			searchList(){
				this.jxkhArr = []
				this.jxkhNowPage = 1
				this.dltjList()
			},
			change(e) {
				this.time = e.startDate + '~' +e.endDate
				this.dayStart = e.startDate
				this.dayEnd = e.endDate
				this.dltjList()
			},
			dltjList() {
				dltjList({
					searchWord: this.keyword,
					pageNo: this.jxkhNowPage,
					pageSize: '10',
					column: 'createTime',
					order: 'desc',
					logType: '1',
					dayStart: this.dayStart,
					dayEnd: this.dayEnd
				}).then((res) => {
					this.jxkhArr = res.data.result.records
				})
			},
			tabsChange(index) {
				this.current = index;
			},
			changeTypeIndex(name, type) {
				this.jxkhArr = []
				this.examUserType = name
				this.jxkhNowPage = 1
				this.typeIndex = type;
				this.dltjList()
			},
			openDetail(x, type) {
				uni.navigateTo({
					url: '../details/index?item=' + JSON.stringify(x) + '&type=' + type
				});
			},
		},
	};
</script>

<style lang="scss"scoped>
	.top_search {
		width: 100vw;
		height: 120rpx;
		display: flex;
		align-items: center;
		// padding: 0 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
	
		.search_screening {
			margin-left: 2%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
	
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
	
			.font {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
			}
		}
	}
	

		.task_one {
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx;
			position: relative;
			margin-bottom: 40rpx;
			box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			display: flex;
			align-items: center;
		}
	
		.task_head {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			margin-bottom: 40rpx;
	
			.headFont {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #272b32;
			}
	
			.task_type1 {
				min-width: 150rpx;
				margin-left: 10rpx;
				text-align: center;
				background: rgba(250, 173, 51, 0.1);
				border-radius: 4rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #faad33;
				padding: 8rpx 16rpx;
			}
	
			.task_type2 {
				min-width: 150rpx;
				text-align: center;
				margin-left: 10rpx;
				background: rgba(48, 116, 255, 0.1);
				border-radius: 4rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(48, 116, 255, 1);
				padding: 8rpx 16rpx;
			}
	
			.task_type3 {
				min-width: 150rpx;
				text-align: center;
				margin-left: 10rpx;
				background: rgba(31, 211, 183, 0.1);
				border-radius: 4rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(31, 211, 183, 1);
				padding: 8rpx 16rpx;
			}
		}
	
		
		.task_line100 {
			width: 100%;
			display: flex;
			align-items: center;
			// margin-bottom: 30rpx;
			
			.line_left {
				min-width: 25%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
			}
			
			.line_left32 {
				min-width: 50%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
			}
			
			.line_right {
				max-width: 80%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(205, 211, 224, 1);
			}
		}
		.task_line {
			width: 50%;
			display: flex;
			align-items: center;
			// margin-bottom: 30rpx;
	
			.line_left {
				min-width: 50%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
			}
	
			.line_left32 {
				min-width: 50%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
			}
	
			.line_right {
				max-width: 80%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #272b32;
			}
		}
	
		.type_flex {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
	
			.type_one {
				width: 30%;
				margin: 0 1.5%;
				height: 60rpx;
				background: #3074ff;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				margin-bottom: 30rpx;
			}
	
			.type_two {
				background: #ffffff;
				border: 1rpx solid #e7e9f0;
				border-radius: 30rpx;
				width: 30%;
				margin: 0 1.5%;
				height: 60rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(142, 156, 179, 1);
				margin-bottom: 30rpx;
			}
		}
</style>
